{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h4><i class="fas fa-book"></i> 词汇学习</h4>
                <small>深入学习英语单词的含义和用法</small>
            </div>
            <div class="card-body">
                <form id="vocabulary-form">
                    <div class="mb-3">
                        <label for="word-input" class="form-label">输入要查询的英语单词：</label>
                        <input type="text" class="form-control" id="word-input" placeholder="例如：perseverance">
                    </div>
                    <button type="submit" class="btn btn-info" id="search-btn">
                        <i class="fas fa-search"></i> 查询单词
                    </button>
                </form>
                
                <div id="result-container" class="mt-4" style="display: none;">
                    <h5>单词解释：</h5>
                    <div id="explanation-result" class="alert alert-info" style="white-space: pre-line;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const vocabularyForm = document.getElementById('vocabulary-form');
    const wordInput = document.getElementById('word-input');
    const searchBtn = document.getElementById('search-btn');
    const resultContainer = document.getElementById('result-container');
    const explanationResult = document.getElementById('explanation-result');
    
    vocabularyForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const word = wordInput.value.trim();
        if (!word) {
            alert('请输入要查询的单词');
            return;
        }
        
        searchBtn.disabled = true;
        searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 查询中...';
        
        try {
            const response = await fetch('/vocabulary', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ word: word })
            });
            
            const data = await response.json();
            
            if (data.error) {
                explanationResult.className = 'alert alert-danger';
                explanationResult.textContent = data.error;
            } else {
                explanationResult.className = 'alert alert-info';
                explanationResult.textContent = data.explanation;
            }
            
            resultContainer.style.display = 'block';
            // 滚动到结果区域
            resultContainer.scrollIntoView({ behavior: 'smooth' });
            
        } catch (error) {
            explanationResult.className = 'alert alert-danger';
            explanationResult.textContent = '查询过程中出现错误，请重试。';
            resultContainer.style.display = 'block';
        } finally {
            searchBtn.disabled = false;
            searchBtn.innerHTML = '<i class="fas fa-search"></i> 查询单词';
        }
    });
});
</script>
{% endblock %}